<template>
  <div>
    <el-dialog title="导入" :visible.sync="visible" width="50%" :before-close="handleClose">
      <el-form ref="ruleForm" :model="fileData" label-width="100px" :rules="rules">
        <el-form-item label="选择文件">
          <div class="form-item-file">
            <el-input v-model="fileData.name" placeholder="请选择文件"></el-input>
            <BaseUpload
              ref="upload"
              :auto-upload="false"
              :file-type="['xlsx']"
              :on-change="onChange"
              style="width: 150px"
            >
              <el-button>选择文件</el-button>
            </BaseUpload>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="base-drawer-footer">
            <el-button class="cancel-button" :disabled="disabled" @click="visible = false">取消</el-button>
            <el-button class="confirm-button" type="primary" :disabled="disabled" @click="confirm">导入</el-button>
          </div>
        </el-form-item>
        <el-form-item v-if="result">
          <div class="tips">
            <span>
              总条数:
              <el-tag>{{ result.total }}</el-tag>
            </span>
            <span>
              成功条数:
              <el-tag type="success">{{ result.success }}</el-tag>
            </span>
            <span>
              失败条数:
              <el-tag type="danger">{{ result.failure }}</el-tag>
            </span>
          </div>
          <BaseTable v-if="result.errors && result.errors.length" :columns="columns" :data="result.errors">
            <template #messages="{ row }">
              <span v-for="(v, i) in row.messages" :key="i"> {{ v }}<br /> </span>
            </template>
          </BaseTable>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExcelImport',
  props: {
    // 导入文件接口
    importApi: {
      type: Function,
      default: () => new Promise(resolve => resolve({}))
    }
  },
  data() {
    return {
      visible: false,
      fileData: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: '请输入文件名称', trigger: 'blur' }]
      },
      disabled: true,
      columns: [
        {
          label: '行数',
          prop: 'row',
          customRender: row => `第${row.row}行`
        },
        {
          label: '错误信息',
          prop: 'messages'
        }
      ],
      // 导入结果
      // { success: 0, failure: 0, total: 0, errors: [{ row: 1, messages: [] }] }
      result: null,
      // 导入成功次数
      successCount: 0
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    handleClose() {
      if (this.successCount > 0) {
        this.$emit('success', this.successCount)
      }
      this.$refs.ruleForm.resetFields()
      Object.assign(this.$data, this.$options.data())
    },
    confirm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = new FormData()
          formData.append('file', this.fileData.raw)
          this.importApi(formData).then(res => {
            this.result = res.data
            const { success, failure, total } = res.data
            if (success === total) {
              this.successCount += 1
              this.$message.success('导入成功')
            } else if (failure === total) {
              this.$message.error('导入失败')
            } else if (success > 0 && failure > 0) {
              this.successCount += 1
              this.$message.info(`${success}条导入成功,${failure}条导入失败`)
            }
          })
        }
      })
    },
    // 文件状态改变时
    onChange(file) {
      const valid = this.$refs.upload.validate(file.raw)
      if (!valid) {
        this.disabled = true
        return
      }
      this.disabled = false
      this.fileData = file
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-file {
  display: flex;
}

.tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.base-drawer-footer {
  flex: none;
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -24px;
  border-top: 1px solid #e6e7eb;
  .cancel-button {
    width: 160px;
    height: 40px;
    border-radius: 4px;
    background: #f0f2f5;
    margin-right: 10px;
    font-size: 14px;
    color: #333;
    border: none;
    margin-right: 0px;
  }
  .confirm-button {
    width: 160px;
    height: 40px;
    border-radius: 4px;
    background: #397bfe;
    color: #fff;
    font-size: 14px;
  }
  &::v-deep {
    .el-button--text {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
::v-deep .el-table .el-table__row td .cell {
  overflow-y: auto;
  max-height: 180px;
}
</style>
